<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="description" content="嗨佑,人生就是一部小说,记录生活的点滴" />
    <meta name="keywords" content="嗨佑,记录生活,小说人说,分享你的生活动态,订阅他人的分享" />
    <link rel="stylesheet" href="/faceb-cupt/css/reset.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/css/index.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/util/font-awesome-3.2.1/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="/faceb-cupt/util/font-awesome-3.2.1/css/font-awesome.min.css" />
    <style type="text/css">
    .wrongalert {
        color: red;
        text-align: center;
        display: none;
    }
    .login-alert{
        text-align: center;
        color: red;
    }
    </style>
    <title>记录生活的点滴</title>
</head>

<body>
    <div class="page-header clearfix">
        <h1 class="page-header-title pull-left">欢迎来到校园分享网，赶快注册一起嗨起来</h1>
        <div class="page-header-personal pull-right">
            <a href="javascript:void(0)" class="personal-photo">
                <span class="name">静待佳名</span>
                <img src="/faceb-cupt/img/avtar.png" alt="test" />
            </a>
        </div>
    </div>
    <div class="page-aside">
        <ul class="navbar">
            <li>
                <a href="javascript:void(0)" class="home">
                    <i class="icon-home"></i>
                </a>
                <a href="javascript:void(0)">
                    <i class="icon-user"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="page-content-login">
        <div class="page-tab clearfix">
            <a href="#">登录</a>
            <a class="line">|</a>
            <a href="#">注册</a>
        </div>
        <div class="tab-main">
            <div class="login-box" id="login-form">
                <form action="/faceb-cupt/deallogin" method="get">
                    <div class="form-group">
                        <img src="/faceb-cupt/img/avtar.png" class="" alt="logo" />
                    </div>
                    <div class="form-group">
                        <span class="form-title">使用邮箱登录</span>
                    </div>
                    <div class="form-group">
                        <!--<label for="username">用户名:</label>-->
                        <input type="text" class="form-control" name="email" id="login-username" placeholder="邮箱" />
                    </div>
                    <div class="form-group">
                        <!--<label for="password">密码:</label>-->
                        <input type="password" class="form-control" name="password" id="login-password" placeholder="密码" />
                    </div>
                    <div class="form-group">
                        <!--<label for="password">密码:</label>-->
                        <p class="login-alert"></p>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-login" id="btn-login" value="登陆" />
                    </div>
                </form>
            </div>
            <div class="register-box">
                <form id="register-form" action="/faceb-cupt/dealregister" method="get">
                    <div class="form-group">
                        <img src="/faceb-cupt/img/avtar.png" alt="logo" />
                    </div>
                    <div class="form-group">
                        <span class="form-title">使用邮箱注册</span>
                    </div>
                    <div class="form-group">
                        <!--<label for="username">用户名:</label>-->
                        <input type="text" class="form-control" name="email" id="register-email" placeholder="邮箱" />
                    </div>
                    <div class="form-group">
                        <!--<label for="password">密码:</label>-->
                        <input type="password" class="form-control" name="password" id="register-pwd1" placeholder="密码" />
                    </div>
                    <div class="form-group">
                        <!--<label for="password">确认密码:</label>-->
                        <input type="password" class="form-control" name="second-password" id="register-pwd2" placeholder="确认密码" />
                    </div>
                    <div class="form-group">
                        <p class="wrongalert">密码不一致</p>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="注册" class="btn btn-login" id="btn-register" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="/faceb-cupt/js/lib/jq.js"></script>
<script src="/faceb-cupt/js/lib/template.js"></script>
<script type="text/javascript">
var app = {
    init: function() {
        this.render();
        this.bindEvent();
    },
    bindEvent: function() {
        //tab
        var $tab = $(".page-tab a");

        $tab.on("click", function(e) {
            if ($(this).text() == "登录") {
                $(".tab-main>div").hide();
                $(".login-box").show();
            } else if ($(this).text() == "注册") {
                $(".tab-main>div").hide();
                $(".register-box").show();
            }

        });
        var $login = $("#login-form");
        $login.on("submit", function() {
         
            var $login_email = $.trim($("#login-username").val());
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            var $alert=$(".login-alert");
            var $login_pwd=$.trim($("#login-password").val());
            //console.log($login_email.length+" "+$login_pwd.length);
            if(($login_email.length==0)||($login_pwd.length==0)){
                $alert.text("请输入邮箱和密码");
                $alert.fadeIn(300);
                return false;
            }
            
            if (!(filter.test($.trim($login_email)))) {
                $alert.text("请输入正确的邮箱");
                $alert.fadeIn(300);

                return false;
            }else{
                $alert.fadeOut();
            }

        });
        var $register = $("#register-form");
        $register.on("submit", function() {
            var register_email = $.trim($("#register-email").val());
            var pwd1 = $("#register-pwd1").val();
            var pwd2 = $("#register-pwd2").val();
            if (!register_email || !pwd2 || !pwd1) {
                $(".wrongalert").text("请认真填完每一项。");
                $(".wrongalert").fadeIn(300);
                return false;
            }

            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            if (!filter.test(register_email)) {
                $(".wrongalert").text("邮箱格式不正确");
                $(".wrongalert").fadeIn(300);
                return false;

            }


            if (!($.trim(pwd2) === $.trim(pwd1))) {
                $(".wrongalert").text("密码不一致");
                $(".wrongalert").fadeIn(300);
                return false;
            } else {
                $(".wrongalert").fadeOut(300);

            }




        })


    },
    render: function() {
        $(".login_box").show();
        $(".register-box").hide();
    }

}
app.init();
</script>

</html>
